<template>
  <!-- <div id="User" class="shadow-box"> -->
  <div id="User" class="shadow-box" style="overflow-y: hidden">
    <el-form v-show="userData.name" :model="userData" :rules="rules" ref="userData" label-width="100px" class="body">
      <el-form-item>
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>姓名</span>： {{ userData.name_ }}</div>
          <div class="right"></div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>昵称</span>： {{ userData.nickName }}</div>
          <div class="right"></div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>职位</span>： {{ userData.roleName }}</div>
          <div class="right"></div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>工号</span>： {{ userData.jobNum }}</div>
          <div class="right"></div>
        </div>
      </el-form-item>
      <el-form-item label=" " v-show="fuck_name == 'phone'" prop="phone_input">
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>手机号</span>： <el-input v-model="userData.phone_input"></el-input></div>
          <div class="right">
            <el-button type="success" @click="setUserData('phone_input')">确认</el-button
            ><el-button
              type="info"
              @click="
                fuck_name = ''
                userData.phone_input = ''
              "
              >取消</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item v-show="fuck_name != 'phone'">
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>手机号</span>： {{ userData.phone_ }}</div>
          <div class="right"><el-button type="primary" @click="fuck_name = 'phone'">设置</el-button></div>
        </div>
      </el-form-item>
      <el-form-item label=" " prop="email_input" v-show="fuck_name == 'email'">
        <div class="border-shadow-box flex_sb">
          <div class="left flex_sb"><span>邮箱</span>： <el-input v-model="userData.email_input" style="margin-left: 0"></el-input></div>
          <div class="right">
            <el-button type="success" @click="setUserData('email_input')">确认</el-button
            ><el-button
              type="info"
              @click="
                fuck_name = ''
                userData.email_input = ''
              "
              >取消</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item v-show="fuck_name != 'email'">
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>邮箱</span>： {{ userData.email_ }}</div>
          <div class="right"><el-button type="primary" @click="fuck_name = 'email'">设置</el-button></div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="border-shadow-box flex_sb">
          <div class="left"><span>是否冻结</span>： {{ userData.frozen ? '冻结' : '未冻结' }}</div>
          <div class="right"></div>
        </div>
      </el-form-item>
      <el-button type="warning" class="setPassword" @click="setPassword_box = true">修改密码</el-button>
    </el-form>
    <el-empty v-show="!userData.name" description="未检测到登录信息，请重新登录"></el-empty>
    <el-dialog title="修改密码" width="50%" :visible.sync="setPassword_box">
      <section>
        <el-form label-width="80px" ref="setPassword_ref" :model="setPassword_data" :rules="setPassword_rules">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input type="" v-model="setPassword_data.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" autocomplete="new-password" v-model="setPassword_data.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="setPassword_data.confirmPassword"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setPassword_box = false">取 消</el-button>
        <el-button type="primary" @click="setPassword_fun()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { User, setPassword } from '../../api/user'
import { updateStaff } from '../../api/staff'
import { getUID, setToken } from '../../utils/auth'
import { checkPhone, checkEmail, checkPass } from '../../utils/validate'
// 组件
import upload from '../../components/iUpload.vue'
export default {
  name: 'User',
  data() {
    return {
      userData: {
        phone_input: '',
        email_input: '',
        name: '',
        nickName: '',
        roleName: '',
        jobNum: '',
        jobNum_: '***',
        // 加密数据
        name_: '***',
        phone_: '***',
        email_: '***',
        frozen: false,
      },

      fuck_name: '',
      rules: {
        phone_input: [{ validator: checkPhone }],
        email_input: [{ validator: checkEmail }],
      },
      // 修改密码相关
      setPassword_box: false,
      setPassword_data: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      setPassword_rules: {
        oldPassword: [{ validator: checkPass }],
        newPassword: [{ validator: checkPass }],
        confirmPassword: [
          {
            validator: (rule, value, callback) => {
              if (value != this.setPassword_data.newPassword) {
                callback(new Error('需要与新密码相同'))
              } else {
                callback()
              }
            },
          },
        ],
      },
    }
  },
  components: {
    upload,
  },
  created() {
    this.getUser()
    let e = ''
    let obj = false
    let newObj = e && obj
    console.log(newObj)
  },
  mounted() {},
  methods: {
    // 获得 userData
    async getUser() {
      let id = getUID()
      const data = await User({ parameters: { id } })
      if (data.result == 0) {
        let userData = data.resultContent.userList[0]
        // 存ID 修改时作为身份参数
        // 判断获取身份
        userData.roleName = this.$store.state.userRole.filter(role => role.code === userData.role).length?this.$store.state.userRole.filter(role => role.code === userData.role)[0].name:''
        for (let key in userData) {
          this.userData[key] = userData[key]
        }
        console.log(this.userData)
        this.encrypt_n_p_e()
      }
    },
    // 生成指定位数的 * ，用以加密
    encrypt_fun(num) {
      let encrypt = ''
      for (let i = 0; i < num; i++) {
        encrypt += '*'
      }
      return encrypt
    },
    // 加密姓名手机邮箱
    encrypt_n_p_e() {
      // 加密姓名
      this.userData.name_ = this.userData.name[0] + this.encrypt_fun(this.userData.name.length - 1)
      // 加密手机
      this.userData.phone_ = this.userData.phone.slice(0, 3) + this.encrypt_fun(this.userData.phone.length - 7) + this.userData.phone.slice(this.userData.phone.length - 4, this.userData.phone.length)
      // 加密邮箱
      this.userData.email_ = this.userData.email.slice(0, 3) + this.encrypt_fun(this.userData.email.length - 7) + this.userData.email.slice(this.userData.email.length - 7, this.userData.email.length)
    },
    // 修改 手机号/邮箱
    setUserData(name) {
      this.$refs.userData.validateField(name, async err => {
        if (!err) {
          // 执行修改手机号或者密码的操作
          let data = {}
          data.id = this.userData.id
          // 动态设置修改的内容
          data[name.split('_input')[0]] = this.userData[name]
          // 通知服务器修改内容
          let res = await updateStaff({ parameters: data })
          if (res.result === 0) {
            // 服务器修改成功
            // 手动修改本地数据
            this.userData[name.split('_input')[0]] = this.userData[name]
            // 重新加密
            this.encrypt_n_p_e()
            // 关闭
            this.fuck_name = ''
            // 提示
            this.$message.success({
              message: '修改成功',
            })
          }
        } else {
          this.$message.warning(err)
        }
      })
    },
    setPassword_fun() {
      this.$refs.setPassword_ref.validate(async (bool, data) => {
        if (bool) {
          let data = {}
          data.id = this.userData.id
          data.oldPassword = this.setPassword_data.oldPassword
          data.newPassword = this.setPassword_data.newPassword
          console.log(data)
          let resData = await setPassword(data)
          if (resData.result == 0) {
            setToken(resData.resultContent.token)
            this.setPassword_box = false
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败，请联系管理员修改或稍后重试')
          }
        } else {
          this.$message.warning('请按要求输入密码')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  .left {
    display: flex;
    span {
      display: block;
      min-width: 50px;
    }
  }
  .setPassword {
    position: absolute;
    bottom: 50px;
    right: 10px;
  }
}
</style>
